<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .father{
            width: 300px;
            height: 300px;
            background-color: rosybrown;
        }
        .son{
            width: 200px;
            height: 200px;
            background-color: rgb(126, 56, 56);
        }
        .bos{
            width: 200px;
            height: 200px;
            background-color: rgb(197, 176, 176);
        }
        img{
            width: 100px;
            height: 100px;
            position: absolute;
            top: 0;
        }
        body{
            position: relative;
        }
        .yell{
            width: 500px;
            height: 500px;
            background-color: palegoldenrod;
        }
    </style>
</head>
<body>
    <div class="box">111</div>
    <ul>
        <li>我是1</li>
        <li>我是2</li>
        <li>我是3</li>
    </ul>
    <div class="father">
        <div class="son">son</div>
    </div>
    <div class="yell"></div>
    <a href="https://www.baidu.com" >跳转</a>
    <div class="bos"></div>

    <img src="../day3作用域/bjt2.jpg" />
    <script>
        let box = document.querySelector('.box')
        let ul = document.querySelector('ul')
        let li = document.querySelectorAll('li')
        let father= document.querySelector('.father')
        let son = document.querySelector('.son')
        let a = document.querySelector('a')
        let bos = document.querySelector('.bos')
        let img = document.querySelector('img')
        let yell = document.querySelector('.yell')
        console.log(yell)
        bos.addEventListener('click',function (e) {
            e.target.style.background = 'red';
            console.log(e);
        })
        bos.addEventListener('mouseover',function (e) {
            e.target.style.background = 'yellow';
            console.log(e);
        })
        bos.addEventListener('mouseout',function (e) {
            e.target.style.background = 'blue';
            console.log(e);
        })
        //mousemove鼠标移动事件
        console.log(img)
        yell.addEventListener('mousemove',function(e) {
            // console.log(e)
            // console.log(e.clientX)
            // img.style.left = e.clientX -40 +'px';
            // img.style.top = e.clientY -40 +'px';
            img.style.left = e.clientX +'px';
            img.style.top = e.clientY +'px';
           
        })
        // img.addEventListener('mousemove',function (e) {
        //     console.log(e)
        // })
        a.addEventListener('click',function (e) {
            e.preventDefault()
            //阻止默认事件
        })

        father.addEventListener('click',function (e) {
            console.log('father');
        });
        son.addEventListener('click',function (e) {
            console.log('son');
            e.stopPropagation();
            //阻止冒泡事件
        });


        box.addEventListener('click',function (e) {
            console.log(this);
            console.log(e.target);
        })
        ul.addEventListener('click',function (e) {
            this.style.background = 'pink';
            e.target.style.color = 'red'
            // for(var i = 0; i< li.length; i++){
            //     li[i].onclick = function (e) {
            //         for(var i = 0; i< li.length; i++){
            //            li[i].style.color = 'red'
            //         }
            //     }
            //     this.style.color = 'black'
            // }
            // for(let i = 0;)
        })
    </script>
</body>
</html>